<template>
  <div>
    <el-dialog title="修改用户" :visible.sync="dialogFormVisible" :modal="false">
      <div class="tfscrollbarstyle" style="height:400px;">
        <el-form :rules="rules" ref="dataForm" :model="temp" label-position="right" label-width="100px" style='width: 496px; margin-left:50px;'>
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="temp.userName" size="mini" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名" prop="trueName">
            <el-input v-model="temp.trueName" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="temp.phone" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="详细地址" prop="address">
            <el-input v-model="temp.address" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="QQ：" prop="qq">
            <el-input v-model="temp.qq" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱：" prop="email">
            <el-input v-model="temp.email" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="微信账号：" prop="wechat">
            <el-input v-model="temp.wechat" size="mini"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
        <el-button  type="primary" @click="createData" size="mini">确 定</el-button>

      </div>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
  import { updateUserInfo, getUserByTrueNameRemote } from '@/view/api/userManager.js'
  import { yfuSuccessToast } from '@/utils/yfuMessage.js'
  import {yfuPost} from '@/utils/request.js'
  import store from '@/store'

  export default {
    data () {
      return {
        activeName: 'first',
        trueNameBak: '',
        temp: {
          id: '',
          userName: '',
          trueName: '',
          phone: '',
          address: '',
          qq: '',
          email: '',
          wechat: '',
          skin: ''
        },
        dialogFormVisible: false,
        dialogPvVisible: false,
        rules: {
          userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' },
            {min: 3, max: 16, message: '必须3-16个字符', trigger: 'blur'}],
          trueName: [{max: 50, message: '最大50个字符', trigger: 'blur'}, { required: true, message: '姓名不能为空', trigger: 'blur' },
            { trigger: 'blur', validator: this.isvalidateTrueName }],
          phone: this.filter_rules({required: true, min: 9, max: 11, type: 'mobile'}),
          qq: this.filter_rules({maxLength: 11, type: 'qq'}),
          email: this.filter_rules({maxLength: 50, type: 'email'}),
          wechat: [{max: 11, message: '最大11个字符', trigger: 'blur'}],
          address: [{max: 50, message: '最大50个字符', trigger: 'blur'}]
        }
      }
    },
    methods: {
      isvalidateTrueName (rule, value, callback) {
        let regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im
        let regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im
        if (value != null && value !== '') {
          if (regEn.test(value) || regCn.test(value)) {
            callback(new Error('您输入的名称包含特殊符号!'))
          } else {
            if (this.trueNameBak !== value) {
              let param = {}
              param.trueName = value
              yfuPost(getUserByTrueNameRemote.url, param, (data) => {
                if (data === '姓名可以注册') {
                  callback()
                } else {
                  callback(new Error('用户名已存在'))
                }
              })
            } else {
              callback()
            }
          }
        } else {
          callback()
        }
      },
      handleClick () {

      },
      createUserDialog (item) {
        this.dialogFormVisible = true
        this.temp.id = item.id
        this.temp.userName = item.userName
        this.temp.trueName = item.trueName
        this.temp.phone = item.mobile
        this.temp.address = item.detailAddress
        this.temp.qq = item.qq
        this.temp.email = item.email
        this.temp.wechat = item.wechat
        this.trueNameBak = item.trueName
        this.temp.skin = item.skin
      },
      createData () {
        let cThis = this

        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            let params = {}
            params.id = cThis.temp.id
            params.userName = cThis.temp.userName
            params.trueName = cThis.temp.trueName
            params.mobile = cThis.temp.phone
            params.detailAddress = cThis.temp.address
            params.qq = cThis.temp.qq
            params.email = cThis.temp.email
            params.wechat = cThis.temp.wechat
            params.skin = cThis.temp.skin
            params.modifyUserInfoType = 1

            updateUserInfo(params,
              function (data) {
                console.log(data)
                cThis.updateUserInfo()
                cThis.dialogFormVisible = false
                yfuSuccessToast('修改成功！')
                cThis.sessionput('user', params)
              },
              function (error) {
                console.log(error)
              }
            )
          } else {
            return false
          }
        })
      },
      updateUserInfo () {
        store.commit('SET_TRUENAME', this.temp.trueName)
        store.commit('SET_MOBILE', this.temp.phone)
        store.commit('SET_DETAILADDRESS', this.temp.address)
        store.commit('SET_QQ', this.temp.qq)
        store.commit('SET_EMAIL', this.temp.email)
        store.commit('SET_WECHAT', this.temp.wechat)
        store.commit('SET_SKIN', this.temp.skin)
      }
    }
  }
</script>

<style>

</style>
